<template>
	<view style="min-height: 100vh;background: #F3F3F3;">
		<view style="padding: 16upx 24upx;">
			<view class="withdrawalT">
				<view>提现到</view>
				<image src="../../static/mine/Alipay.png"></image>
				<view>支付宝</view>
			</view>
			<view class="withdrawalC">
				<view class="withdrawalCItem">
					<view>支付宝账号</view>
					<input type="text" placeholder="请输入" v-model="mobile" @blur="mobileChange" />
				</view>
				<view class="withdrawalCItem">
					<view>真实姓名</view>
					<input type="text" placeholder="请输入" v-model="name" @blur="nameChange" />
				</view>
				<view class="withdrawalCItem" v-if="changeFlag">
					<view>手机号</view>
					<input type="number" placeholder="请输入" v-model="mobile1" disabled />
				</view>
				<view class="withdrawalCItem" v-if="changeFlag">
					<view>验证码</view>
					<view class="inputBox">
						<input class="input" type="text" placeholder="请输入验证码" v-model="password"/>
						<view style="width: 240upx;text-align: end;color:#409EFF" @click="getCode">{{codeText}}</view>
						<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
					</view>
				</view>
				
			</view>
			<view class="withdrawalB">
				<view class="withdrawalBTitle">提现金额</view>
				<view class="withdrawalBB">
					<view>￥</view>
					<input type="number" placeholder="请输入金额" v-model="money" />
					<view>全部提现</view>
				</view>
			</view>
			<view v-if="appSync.service_charge_percentage" style="margin-top: 30upx;">提现手续费为千分之{{appSync.service_charge_percentage}}</view>
			<view class="submit" @click="submit">提现</view>
		</view>
		<number-jpan :length="6" @closeChange="closeChange($event)" :showNum="false" ref="numberPad"></number-jpan>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	import numberJpan from "@/components/numberJpan/numberJpan.vue";
	export default {
		data() {
			return {
				mobile:"",
				name:"",
				money:"",
				submitData:{},
				reqFlag:true,
				appSync:{},
				password:"",
				mobile1:"",
				codeText:'',
				changeFlag:false,
				infos:{}
			}
		},
		components:{"number-jpan":numberJpan},
		onLoad() {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			this.getUserDetail();
			this.getDetail();
			// #ifdef APP
			this.getMsg();
			// #endif
		},
		methods: {
			getUserDetail(){
				this.$u.api.userDetails({user_id:uni.getStorageSync("userId")}).then(res=>{
					this.mobile1 = res.data.data.mobile;
				})
			},
			mobileChange(e){
				if(e.detail.value != this.infos.withdrawal_mobile || this.name != this.infos.name){
					this.changeFlag = true;
				}else{
					this.changeFlag = false;
				}
			},
			nameChange(e){
				if(e.detail.value != this.infos.name || this.mobile != this.infos.withdrawal_mobile){
					this.changeFlag = true;
				}else{
					this.changeFlag = false;
				}
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					let obj = {};
					obj.mobile = this.mobile1;
					obj.type = 7;
					if(!this.mobile1){
						this.$refs.uToast.show({
							type:"error",
							title:"请输入手机号",
							duration:2000
						})
						return false;
					}
					console.log(app.$vm.globalData)
					if(!app.$vm.globalData.phoneReg.test(this.mobile1)){
						this.$refs.uToast.show({
							type:"error",
							title:"请输入正确的手机号",
							duration:2000
						})
						return false;
					}
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$u.api.sendMessage(obj).then(res=>{
						console.log(res)
						uni.hideLoading();
						this.$refs.uToast.show({
							type:"success",
							title:"发送成功",
							duration:2000
						})
						this.$refs.uCode.start();
					})
				}else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			getMsg(){
				this.$u.api.userMoneyLogNewestDetails().then(res=>{
					console.log(res)
					this.name = res.data.name;
					this.mobile = res.data.withdrawal_mobile;
					this.infos = res.data;
				})
			},
			getDetail(){
				this.$u.api.commonDetails().then(res=>{
					this.appSync = res.data.details;
				})
			},
			submit(){
				let obj = {};
				obj.mobile = this.mobile;
				obj.name = this.name;
				obj.money = this.money;
				obj.pay_type = 20;
				if(this.changeFlag){
					obj.code = this.password;
				}
				let money = Number(obj.money);
				let blMoney = (money - money*Number(this.appSync.service_charge_percentage)/1000).toFixed(2);
				this.$refs.numberPad.open("本次提现实际到账"+blMoney+"元");
				this.submitData = obj;
			},
			closeChange(e){
				if(!this.reqFlag){
					return false;
				}
				this.reqFlag = false;
				this.submitData.payPassword = e;
				this.$u.api.userWithdrawal(this.submitData).then(res=>{
					console.log(res)
					this.reqFlag = true;
					this.$refs.uToast.show({
						title:"提现成功",
						type:"success",
						duration:2000
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},2000)
				})
				.catch(err=>{
					this.reqFlag = true;
				})
			}
		}
	}
</script>

<style scoped>
	.inputBox{
		width: calc(100% - 180upx) !important;
		display: flex;
		align-items: center;
		padding: 32upx 0;
		border-bottom: 2upx solid #EFEFEF;
		
	}
	.input{
		width: calc(100% - 64upx);
		font-size: 28upx;
		border: 0;
		outline: 0;
		color: #555555;
	}
	.withdrawalC{
		width: 100%;
		box-sizing: border-box;
		padding: 0 24upx;
		/* display: flex; */
		/* align-items: center; */
		border-radius: 8upx;
		background: white;
		margin-bottom: 16upx;
	}
	.withdrawalCItem{
		width: 100%;
		height: 80upx;
		display: flex;
		align-items: center;
	}
	.withdrawalCItem{
		border-bottom: 2upx solid #F3F3F3;
	}
	.withdrawalCItem:last-child{
		border-bottom: none;
	}
	.withdrawalCItem>view{
		font-size: 28upx;
		line-height: 80upx;
		color: #333333;
		width: 180upx;
	}
	.withdrawalCItem>input{
		width: calc(100% - 180upx);
		height: 80upx;
		font-size: 28upx;
	}
	
	
	.submit{
		width: 100%;
		height: 92upx;
		line-height: 92upx;
		border-radius: 46upx;
		color: white;
		text-align: center;
		font-size: 28upx;
		margin-top: 48upx;
		background: #FFAC3F;
	}
	
	
	.withdrawalB{
		width: 100%;
		box-sizing: border-box;
		border-radius: 8upx;
		background: white;
		padding: 32upx 24upx 36upx;
	}
	.withdrawalBTitle{
		font-size: 24upx;
		line-height: 24upx;
		color: #333333;
		margin-bottom: 32upx;
	}
	.withdrawalBB{
		width: 100%;
		border-bottom: 2upx solid #F5F5F5;
		display: flex;
		align-items: baseline;
		padding: 16upx 0;
		justify-content: space-between;
	}
	.withdrawalBB>view:nth-child(1){
		font-size: 28upx;
		font-weight: bold;
	}
	.withdrawalBB>input{
		width: calc(100% - 200upx);
		height: 56upx;
		font-size: 48upx;
	}
	.withdrawalBB>view:nth-child(3){
		font-size: 24upx;
		line-height: 24upx;
		color: #4C8CCE;
	}
	
	
	.withdrawalT{
		width: 100%;
		box-sizing: border-box;
		padding: 28upx 24upx;
		display: flex;
		align-items: center;
		border-radius: 8upx;
		background: white;
		margin-bottom: 16upx;
	}
	.withdrawalT>view:nth-child(1){
		font-size: 24upx;
		line-height: 24upx;
		margin-right: 32upx;
		color: #333333;
	}
	.withdrawalT>image{
		width: 48upx;
		height: 48upx;
		margin-right: 16upx;
	}
	.withdrawalT>view:nth-child(2){
		font-size: 24upx;
		line-height: 24upx;
		color: #333333;
	}
</style>
